import React from 'react';

import bacLogo from '../../assets/image/icon_c.png';
import basLogo from '../../assets/image/icon_s.png';
import babLogo from '../../assets/image/icon_b.png';
import yCRVLogo from '../../assets/img/ycrv.png';
import DAILogo from '../../assets/img/DAI.png';
import sUSDLogo from '../../assets/img/sUSD.png';
import USDCLogo from '../../assets/img/USDC.png';
import USDTLogo from '../../assets/img/USDT.png';

import bg_bank from '../../assets/image/bg_bank.png';
import bg_board from '../../assets/image/bg_board.png';
import bg_home from '../../assets/image/bg_home.png';
import bg_logo from '../../assets/image/bg_logo.png';

const logosBySymbol: {[title: string]: string} = {
  'ESC': bacLogo,
  'ESP': bacLogo,
  'ESB': babLogo,
  'ESS': basLogo,
  'yCRV': yCRVLogo,
  'DAI': DAILogo,
  'HT': DAILogo,
  'USDTHECO': USDTLogo,
  'ETH': DAILogo,
  'HBTC': DAILogo,
  'SUSD': sUSDLogo,
  'USDC': USDCLogo,
  'USDT': USDTLogo,
  'ESC_HT-UNI-LPv2': bacLogo,
  'ESS_HT-UNI-LPv2': basLogo,
  'ESC_USDTHECO-MDEX-LP': basLogo,
  'ESS_USDTHECO-MDEX-LP': basLogo,
  'ESC_ESP-MDEX-LP': basLogo,
  'ESS_ESP-MDEX-LP': basLogo,
  'ESP_USDT-MDEX-LP': basLogo,
  'ESS-ESC': basLogo,

  'bg_bank': bg_bank,
  'bg_board': bg_board,
  'bg_home': bg_home,
  'bg_logo': bg_logo,
};

type BasisLogoProps = {
  symbol: string;
  size?: number;
}

const TokenSymbol: React.FC<BasisLogoProps> = ({ symbol, size = 64 }) => {
  if (!logosBySymbol[symbol]) {
    throw new Error(`Invalid BasisLogo symbol: ${symbol}`);
  }
  return (
    <img
      src={logosBySymbol[symbol]}
      alt={`${symbol} Logo`}
      width={size}
      height={size}
    />
  )
};

export default TokenSymbol;
